GridView is a ViewGroup that displays items in a two dimensional, scrollable grid. The grid items are automatically inserted to the layout using a ListAdapter.
In this article I am going to explain how to create GridView in an Android application. In GridView multiple images will display and when an image is selected, a toast message will display the position of the image.
Create a project
- Start a new project named GridViewDemo.
- Save the image files (image0.jpg, image1.jpg, image2.jpg, image3.jpg, image4.jpg, image5.jpg, image6.jpg, image7.jpg) into the project's res/drawable/ directory.
- Open the main.xml file inside the res/layout/. Insert the following:
<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/gridview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:columnWidth="90dp"
android:numColumns="auto_fit"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:stretchMode="columnWidth"
android:gravity="center"/>
· Create a new class called ImageAdapter that extends BaseAdapter:
import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;
public class ImageAdapter extends BaseAdapter
{
private Context mContext;
private Integer[] mThumbIds = {R.drawable.image0,R.drawable.image1,
R.drawable.
R.drawable.image2,R.drawable.image3,R.drawable.image4,R.drawable.image5,
R.drawable.image6,R.drawable.image7};
public ImageAdapter(Context c)
{
mContext=c;
}
public int getCount()
{
return mThumbIds.length;
}
public Object getItem(int position)
{
return null;
}
public long getItemId(int position)
{
return 0;
}
public View getView(int position, View convertView, ViewGroup parent)
{
ImageView imageView;
if(convertView==null)
{
imageView=new ImageView(mContext);
imageView.setLayoutParams(new GridView.LayoutParams(85,85));
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setPadding(8, 8, 8, 8);
}
else
{
imageView=(ImageView)convertView;
}
imageView.setImageResource(mThumbIds[position]);
return imageView;
}
}
· Open GridViewDemo.java and insert the following code:
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.GridView;
import android.widget.Toast;
public class GridViewDemo extends Activity {
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
GridView gridview = (GridView) findViewById(R.id.gridview);
gridview.setAdapter(new ImageAdapter(this));
gridview.setOnItemClickListener(new OnItemClickListener() {
public void onItemClick(AdapterView<?> parent, View v, int position, long id)
{
Toast.makeText(GridViewDemo.this, "" + (position+1),
Toast.LENGTH_SHORT).show();
}
});
}
}
· Run the application.
Your grid layout should look something like this:
When you select an image the toast message display the position of a selected image.
Leave Comment